<!--
  @author:  long
  @date:    2024/5/27
  @file:    xx
  @require:
-->
<template>
  <div class="popProjectInfo">
    <div class="info-item" v-for="(item, index) in infoItems" :key="index">
      <!--    标题    -->
      <div class="info-item-title">
        <div class="info-item-title-icon">
          <i :class="['iconfont', item.icon]"></i>
        </div>
        <div class="info-item-title-content">{{ item.title }}</div>
      </div>
      <!--   内容     -->
      <div class="info-item-content">
        <div class="flex items-center">
          <template v-if="item.prop == 'suoshu'">
            <div class="mr-3">
              <svg
                t="1716792715854"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1041"
                width="30"
                height="30"
              >
                <path
                  d="M515.072 56.832c-248.832 0-450.56 201.728-450.56 450.048s201.728 450.048 450.048 450.048 450.048-201.728 450.048-450.048-201.216-450.048-449.536-450.048zM418.816 251.904c0-5.12 5.632-9.216 11.776-9.216h192c6.656 0 11.776 4.096 11.776 9.216v145.92c0 5.12-5.12 9.216-11.776 9.216H430.592c-6.656 0-11.776-4.096-11.776-9.216V251.904zM322.56 491.52h187.904V418.816h31.744V491.52h188.416v103.424h-31.232V512H542.72v82.432h-31.232V512H354.304v82.432H322.56V491.52z m84.48 247.808c0 4.096-3.072 7.68-7.168 7.68h-117.76c-2.048 0-4.096-1.024-5.12-2.56-1.536-1.536-2.048-3.584-2.048-5.632v-121.856c0-4.096 3.072-7.68 7.168-7.68H399.36c2.048 0 3.584 1.024 5.12 2.048 1.536 1.536 2.048 3.584 2.048 5.12v122.88z m185.856 0c0 4.096-3.584 7.68-7.68 7.68H468.48c-4.096 0-7.168-3.584-7.68-7.68v-122.368c0-4.096 3.072-7.68 7.68-7.68h117.248c4.096 0 7.68 3.584 7.68 7.68v122.368z m185.856 0c0 4.096-3.584 7.68-7.68 7.68h-117.248c-4.096 0-7.168-3.584-7.68-7.68v-122.368c0-4.096 3.072-7.68 7.68-7.68h117.248c4.096 0 7.68 3.584 7.68 7.68v122.368z"
                  fill="#2DA7F0"
                  p-id="1042"
                ></path>
                <path
                  d="M585.216 609.792H468.48c-4.096 0-7.68 3.584-7.68 7.68v122.368c0 4.096 3.584 7.68 7.68 7.68h117.248c4.096 0 7.68-3.584 7.68-7.68v-122.368c-0.512-4.608-4.096-7.68-8.192-7.68zM771.584 609.792h-117.248c-4.096 0-7.68 3.584-7.68 7.68v122.368c0 4.096 3.584 7.68 7.68 7.68h117.248c4.096 0 7.68-3.584 7.68-7.68v-122.368c-0.512-4.608-3.584-7.68-7.68-7.68zM354.304 512h157.184v82.432h31.232V512h156.672v82.432h31.744V491.52H542.72V418.816h-31.744V491.52H322.56v102.912h31.744zM399.36 609.792H282.112c-4.096 0-7.168 3.584-7.168 7.68v121.856c0 2.048 0.512 4.096 2.048 5.632 1.536 1.536 3.072 2.56 5.12 2.56H399.36c4.096 0 7.168-3.584 7.168-7.68v-122.368c0-2.048-0.512-4.096-2.048-5.12-1.024-2.048-3.072-2.56-5.12-2.56zM430.592 407.04h192c6.656 0 11.776-4.096 11.776-9.216V251.904c0-5.12-5.12-9.216-11.776-9.216H430.592c-6.144 0-11.776 4.096-11.776 9.216v145.92c0 5.12 5.12 9.216 11.776 9.216z"
                  fill="#FFFFFF"
                  p-id="1043"
                ></path>
              </svg>
            </div>
            <div class="flex items-center">
              <span>{{ proInfo.userName }}</span>
              <span class="px-5px text-xl">/</span>
              <span>团队</span>
            </div>
          </template>
          <template v-if="item.prop == 'xmmc'">
            <img class="tableSvgIcon" src="@/assets/icons/svg/scrumFill.svg" />
            <div>{{ proInfo.name }}</div>
          </template>
          <template v-if="item.prop == 'xmbs'">
            <el-tag type="success">{{ proInfo.identification }}</el-tag>
          </template>
          <template v-if="item.prop == 'kjfw'">
            <span>公开</span>
          </template>
          <template v-if="item.prop == 'cy'">
            <span
              >{{
                proInfo && proInfo.members
                  ? proInfo.members.split(',').length
                  : '--'
              }}人</span
            >
          </template>
          <template v-if="item.prop == 'ms'">
            <span>{{ proInfo.description }}</span>
          </template>
        </div>
      </div>
      <el-divider></el-divider>
    </div>
    <div class="color-#aaa">
      {{ proInfo.userName }} 创建于 {{ proInfo.createTime }}
    </div>
  </div>
</template>

<script setup name="PopProjectInfo">
//vue3 监听父级传过来的projectInfo

const props = defineProps({
  projectInfo: {
    type: Object,
    required: true
  }
})

watch(
  () => props.projectInfo,
  newValue => {
    console.info('newValue', newValue)
    proInfo.value = newValue
  }
)
const proInfo = ref({})

const infoItems = ref([
  { title: '所属', content: '所属', icon: 'icon-jianzhu', prop: 'suoshu' },
  {
    title: '项目名称',
    content: '项目名称',
    icon: 'icon-daxiaoxie',
    prop: 'xmmc'
  },
  { title: '项目标识', content: '项目标识', icon: 'icon-cengji', prop: 'xmbs' },
  {
    title: '可见范围',
    content: '项目标识',
    icon: 'icon-yanjing',
    prop: 'kjfw'
  },
  { title: '成员', content: '成员', icon: 'icon-chengyuan', prop: 'cy' },
  { title: '描述', content: '描述', icon: 'icon-description', prop: 'ms' }
])
</script>

<style scoped lang="scss">
.popProjectInfo {
  .info-item-title {
    @apply flex items-center;
    &-content {
      @apply pl-2 color-#999;
    }
  }

  .info-item-content {
    @apply mt-5px pl-25px;
  }

  @apply p3;
  .iconfont {
    color: #999;
    font-size: 20px;
  }

  .icon-jianzhu {
    font-size: 22px;
  }

  .icon-description {
    font-size: 22px;
  }

  .tableSvgIcon {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    margin-left: 5px;
  }
}
</style>
